<template>
    <div class="urlNav">
        <!--<div :class="index === step.length - 1 ? 'active' : ''" v-for="(item,index) in step" :key="index" @click="routerBack(index)">
            <span v-if="index > 0">-</span>
            <label>{{ index === 2 ? (areaList.includes(item) ? '直辖市' : item) : item}}</label>
        </div>-->
        <div class="active">
            <label>{{ park ? parkName : '全部园区' }}</label>
        </div>
    </div>
</template>
<script>
export default {
    name: 'EchartsMap',
    data() {
        return {
            step: [],
            areaList: ['北京市', '天津市', '重庆市', '上海市'],
            jumpType: null,
            park: false
        }
    },
    computed: {
        parkName() {
            return this.$store.getters.parkName
        }
    },
    watch: {
      '$route': {
          handler: function(to) {
              this.park = to.fullPath !== '/screen/country'
          },
          immediate:true
      }
    },
    components: {},
    mounted() {
        let array = sessionStorage.getItem('urlNav').split(',');
        let name = this.$route.name;
        this.step = array;
        switch (name) {
            case 'country':
                if (array.length > 1) {
                    array.pop();
                }
                break;
            case 'province':
                if (array.length > 2) {
                    array.pop();
                }

                break;
            case 'city':
                if (array.length > 3) {
                    array.pop();
                }
                break;
        }
        this.step = array;
    },
    methods: {
        routerBack(e) {
            if ((e === 0 && this.$route.name === 'country') || (e === 1 && this.$route.name === 'province') || (e === 2 && this.$route.name === 'city') || this.jumpType !== null) return
            this.jumpType = e
            this.$Message.loading({
                content: '数据加载中...',
                duration: 100000
            });
            let array = JSON.parse(JSON.stringify(this.step))
            let len = this.step.length
            let index = e
            index += 1

            switch (e) {
                case 0:
                    this.$router.push({name: 'country'})
                    array.splice(e + 1, len);
                    break;
                case 1:
                    if (this.step.length > index) {
                        this.$router.go(-len + 2)
                        array.splice(e + 1, len);
                    }
                    break;
                case 2:
                    if (this.step.length > index) {
                        this.$router.go(-1)
                        array.pop()
                    }
                    break;
            }
            sessionStorage.setItem('urlNav', array);
        }
    }
}
</script>
<style scoped lang="scss">
.urlNav {
    display: inline-block;
    vertical-align: middle;
    margin: 0 screenVw(1.2) 0 0;
    user-select: none;

    div {
        display: inline-block;

    }

    label {
        font-size: screenVw(1.4);
        font-weight: bold;
        color: rgb(70, 102, 122);
        vertical-align: middle;
        cursor: pointer;
        display: inline-block;
        /*max-width: screenVw(9);*/
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    span {
        color: rgb(70, 102, 122);;
        display: inline-block;
        vertical-align: middle;
        margin: 0 .4vw;
    }

    .active {
        label {
            color: #50EEFF;
        }
    }
}
</style>
